<template lang="pug">
#loginModal.ant-modal-root
  .ant-modal-wrap(role="dialog", tabindex="-1")
    .ant-modal(role="document", style="width: 1100px")
      .ant-modal-content(style="display: flex")
        .img-box
          img(
            style="width: 550px; height: 560px",
            src="../assets/image/xinthant.jpg"
          )
        .login-box
          .login-title xinthant system
          a-tabs(defaultActiveKey="1", size="large")
            a-tab-pane(tab="账号密码登录", key="1")
              a-form#xhLoginForm.login-form(
                :form="loginForm",
                @submit="handleLoginSubmit"
              )
                a-form-item
                  a-input(
                    size="large",
                    v-decorator="['user',{ rules: [{ required: true, message: '请输入账号/用户名！' }] }]",
                    placeholder="账号/用户名"
                  )
                    a-icon(
                      slot="prefix",
                      type="user",
                      style="color: rgba(0, 0, 0, 0.25)"
                    )
                a-form-item
                  a-input(
                    size="large",
                    type="password",
                    v-decorator="['pwd',{ rules: [{ required: true, message: '请输入密码！' }] }]",
                    placeholder="密码"
                  )
                    a-icon(
                      slot="prefix",
                      type="lock",
                      style="color: rgba(0, 0, 0, 0.25)"
                    )
                a-row
                  a-col(:span="16")
                    a-form-item(:has-feedback="true")
                      a-input(
                        v-decorator="['captcha',{ rules: [{ required: true, message: '请输入验证码！' }] }]",
                        placeholder="验证码",
                        size="large",
                        autocomplete="off"
                      )
                  a-col(:span="7", :offset="1")
                    a(@click="getCaptcha")
                      img(:src="captcha")
                a-form-item
                  a-button.login-form-button(
                    size="large",
                    type="primary",
                    html-type="submit"
                  ) 登录
</template>

<script>

import loginService from "@/api/login/loginService.js";

export default {

  components: { },
  beforeCreate() {
    this.loginForm = this.$form.createForm(this, {});
  },
  data() {
    return {
      captcha: ""
    };
  },
  created() {
    this.checkSession();
  },
  methods: {
    checkSession(){
      loginService.checkSession().then(res => {
        var data = res.data.data;
        if(!data.sessionTimeOutFlag && !data.timeOutFlag){
          this.$nextTick(() => {
            this.$router.push({path: "/home"});
          });
        }else{
          this.getCaptcha();
        }
      }).catch(res => {
        console.log("err res..............", res);
        this.$message.error(res.data.msg);
      });
    },

    getCaptcha() {
      var promise = loginService.getCheckCode();
      promise.then(res => {
          console.log("res................", res);
          this.captcha = res.data.data.baseCode;
          sessionStorage.setItem("captcha_session", res.data.data.session);
      }).catch(res => {
          console.log("err res.............", res);
          this.$message.error(res.data.msg);
      });
    },

    handleLoginSubmit(e) {
        e.preventDefault();
        this.loginForm.validateFields((errors, values) => {
            if(errors){
                console.warn(errors);
            }else{
              console.log("values...................", values);
              loginService.login(values).then(response => {
                  console.log("success response........", response);
                  sessionStorage.removeItem("captcha_session");
                  sessionStorage.setItem("loginedFlag", "1");
                  this.$nextTick(() => {
                    this.$router.push({path: "/home"});
                  });
              }).catch(response => {
                  console.log("error response...............", response);
                  this.$message.error(response.data.msg);
              });
            }
        });
    }
  },
};
</script>

<style scoped>
.img-box {
  width: 50%;
}

.login-box {
  width: 50%;
  padding: 80px 80px 0 80px;
}

.login-title {
  text-align: center;
  font-size: 25px;
}

#loginModal >>> .login-form {
  
}
#loginModal >>> .login-form-button {
  width: 100%;
}

#loginModal >>> .ant-tabs-nav-scroll {
  text-align: center;
}

#loginModal >>> .login-form-register {
  text-align: center;
}
</style>
